import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../../../components/app_bar/app_bar_widget.dart';
import '../../../../components/gaps.dart';
import '../../../../components/log_utils.dart';
import '../../../../components/select_phone_widget.dart';
import '../../../../components/yt_button.dart';
import '../../../../components/yt_text_style.dart';
import '../../../../resources/str_res_keys.dart';
import '../../../../styles/styles.dart';
import '../access_device/views/infoHeaderView.dart';
import 'access_device_three_controller.dart';

class AccessDeviceThreePage extends GetView<AccessDeviceThreeController> {
  AccessDeviceThreePage({Key? key}) : super(key: key);
  @override
  final controller = Get.put(AccessDeviceThreeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colour.backgroundColor,
      appBar: AppBarWidget.withRightActions(ResKey.addNewDevice.tr),
      body: GetBuilder<AccessDeviceThreeController>(
        builder: (controller) => Column(
          children: [
            Expanded(
              child: ListView(padding: EdgeInsets.zero, children: [
                InfoHeaderView(controller.type),
                Container(
                  height: 10,
                  color: Colour.backgroundColor,
                ),
                Container(
                  clipBehavior: Clip.hardEdge,
                  margin: const EdgeInsets.only(left: 16, right: 16),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: Colors.white,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        // color: Colors.red,
                        margin: EdgeInsets.only(
                            left: 16.w, right: 16.w, top: 16.h, bottom: 16.h),
                        child: Text(
                          ResKey.siteDeviceAccessComplete.tr,
                          style: ytTextStyle(
                              fontSize: 18, fontWeight: FontWeight.w500),
                        ),
                      ),
                       Container(
                        height: 1,
                        margin:  const EdgeInsets.only(left: 16,right: 16),
                        color: Colour.dividerColor,
                      ),
                      _itemsList(),
                      Container(
                        height: 10,
                        color: Colour.backgroundColor,
                      ),
                      // Container(
                      //   color: Colour.dividerColor,
                      //   height: 1,
                      //   margin: EdgeInsets.only(left: 16.w, right: 16.w),
                      // ),

                    ],
                  ),

                ),
                Container(
                    clipBehavior: Clip.hardEdge,
                    margin: const EdgeInsets.only(left: 16, right: 16),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.white,
                    ),
                    child:SelectPhotoWidget(
                      controller.deviceImageList,
                      false,
                      3,
                      photoWidth: 108,
                      titleFontSize: 18,
                      titleString: ResKey.siteDeviceAccessDevicePicture.tr,
                          (List<String> list) {
                        controller.deviceImageList = list;
                        controller.update();
                      },
                    ))
              ]),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                color: Colour.white,
                margin: EdgeInsets.only(top: 10.h),
                padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
                child: SafeArea(
                  child: YtButton(
                    enabled: true,
                    color: Colour.primaryColor,
                    text: ResKey.finished.tr,
                    onPress: () => controller.complete(),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  _itemsList() {
    List<Widget> list = [];
    for (int i = 0; i < controller.titleList.length; i++) {
      var widget = _itemWidget(controller.titleList[i],
          controller.detailList.isNotEmpty ? controller.detailList[i] : '');
      list.add(widget);
     var container = Container(
        height: 1,
        margin: const EdgeInsets.only(left: 16,right: 16),
        color: Colour.dividerColor,
      );
     if(i != controller.titleList.length -1){
       list.add(container);
     }
    }
    return SizedBox(
      height: 51.0 * controller.titleList.length,
      child: Column(
        children: list,
      ),
    );
  }

  _itemWidget(String title, String detail) {
    return Container(
      height: 50,
      alignment: Alignment.centerLeft,
      child: Row(
        children: [
          Gaps.hGap16,
          Text(
            title,
            style: ytTextStyle(fontSize: 16, fontWeight: FontWeight.normal),
          ),
          
          Expanded(child: Text(
            detail,
              textAlign:TextAlign.right,
            maxLines: 2,
            style: ytTextStyle(fontSize: 16, fontWeight: FontWeight.normal),
          )),
          Gaps.hGap16,
        ],
      ),
    );
  }
}
